<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>知否</title>
	<style>
		body,html{
		    scroll-behavior: smooth;
		}
	</style>
    <meta name="description" content="Just playing around.">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/dist/assets/style.BAFIH5E8.css" as="style">
    
    <script type="module" src="/dist/assets/app.Ct44-VeG.js"></script>
    <link rel="preload" href="/dist/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/dist/assets/chunks/framework.CSGcjqEA.js">
    <link rel="modulepreload" href="/dist/assets/chunks/theme.CTRrYzfQ.js">
    <link rel="modulepreload" href="/dist/assets/路线.md.Dx-Leifp.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/dist/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>知否</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/dist/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>前端开发</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./html.html" data-v-43f1e123><!--[-->HTML<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./css.html" data-v-43f1e123><!--[-->CSS<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./js.html" data-v-43f1e123><!--[-->JavaScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./es6.html" data-v-43f1e123><!--[-->ECMAScript6<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./ts.html" data-v-43f1e123><!--[-->TypeScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./git.html" data-v-43f1e123><!--[-->Git<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./react.html" data-v-43f1e123><!--[-->React<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./vue2.html" data-v-43f1e123><!--[-->Vue2<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./vue3.html" data-v-43f1e123><!--[-->Vue3<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./node.html" data-v-43f1e123><!--[-->Node.js<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./%E5%B0%8F%E7%A8%8B%E5%BA%8F.html" data-v-43f1e123><!--[-->微信小程序开发<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./uniapp.html" data-v-43f1e123><!--[-->UniApp<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./%E5%85%AC%E4%BC%97%E5%8F%B7%E5%BC%80%E5%8F%91.html" data-v-43f1e123><!--[-->公众号开发<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>PHP</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" data-v-43f1e123><!--[-->环境搭建<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E8%AF%AD%E6%B3%95.html" data-v-43f1e123><!--[-->PHP语法<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/mysql.html" data-v-43f1e123><!--[-->Mysql<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E5%BA%94%E7%94%A8.html" data-v-43f1e123><!--[-->PHP应用<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Composer.html" data-v-43f1e123><!--[-->Composer<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Thinkphp5.html" data-v-43f1e123><!--[-->Thinkphp5.0<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Laravel8.5.html" data-v-43f1e123><!--[-->Laravel5.6<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>网络技术</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/tcpip.html" data-v-43f1e123><!--[-->TCP/IP协议<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E5%B8%B8%E8%A7%81%E7%BD%91%E7%BB%9C%E5%91%BD%E4%BB%A4.html" data-v-43f1e123><!--[-->常见网络命令<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C.html" data-v-43f1e123><!--[-->计算机网络<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>运维技术</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E8%BF%90%E7%BB%B4%E6%8A%80%E6%9C%AF.html" data-v-43f1e123><!--[-->运维技术<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/AD%E5%9F%9F.html" data-v-43f1e123><!--[-->AD域<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>知识碎片</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80.html" data-v-43f1e123><!--[-->页面布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Grid.html" data-v-43f1e123><!--[-->Grid 网格布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Flex%E5%B8%83%E5%B1%80.html" data-v-43f1e123><!--[-->Flex 布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/less.html" data-v-43f1e123><!--[-->Less<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Sass.html" data-v-43f1e123><!--[-->Sass<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/canvas.html" data-v-43f1e123><!--[-->Canvas<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/JavaScirpt.html" data-v-43f1e123><!--[-->JS文档<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/node%E7%8E%AF%E5%A2%83.html" data-v-43f1e123><!--[-->Node环境搭建<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/jq.html" data-v-43f1e123><!--[-->JQuery笔记<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/echarts.html" data-v-43f1e123><!--[-->Echarts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/nginx.html" data-v-43f1e123><!--[-->Nginx<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/wordpress.html" data-v-43f1e123><!--[-->WordPress<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/linux.html" data-v-43f1e123><!--[-->Linux<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>资料分享</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->TCP/IP协议<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->网络工程师<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Linux镜像<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1tByRfM5z4vLywmTt206YZg" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Web开发电子书<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->心理学电子书<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->摄影教程<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->系统激活工具<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->office软件<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->计算机维修教程<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->英语资料<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->简历模板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->教资<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->网络工程实战<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->安防弱点资料<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Adobe软件<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->PPT模板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1Y8q4vXkx9FUpi0U3a7rJKw" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->软考系统集成<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/ChatGPT.html" data-v-43f1e123><!--[-->ChatGPT<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-ccf7ddec data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ccf7ddec data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-ccf7ddec><div class="divider-line" data-v-ccf7ddec></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _dist_%E8%B7%AF%E7%BA%BF" data-v-39a288b8><div><h2 id="微信公众号" tabindex="-1">微信公众号 <a class="header-anchor" href="#微信公众号" aria-label="Permalink to &quot;微信公众号&quot;">​</a></h2><p>更多资料 关注微信公众号：<strong>零阅Read</strong></p><p><img src="http://fxl.web3v.work/images/img.jpg" alt="img"></p><h2 id="前端学习路线" tabindex="-1">前端学习路线 <a class="header-anchor" href="#前端学习路线" aria-label="Permalink to &quot;前端学习路线&quot;">​</a></h2><p>在当前，有相当一部分人看重了前端的发展前景想要踏入前端这个行业，但是又不知道前端开发需要学习哪些内容，掌握到什么程度可以去找工作，学习路线图又是什么？下面从这几个方向分别给大家分析一下~</p><p>有互联网的地方就需要前端，随着软件开发的发展，企业和用户对前端所呈现的内容都有了更高的要求——页面不仅要在PC端适用，还必须在移动端等多种设备上精美呈现。</p><p>在这个过程中，<strong>React、Angular、Vue等突破传统前端成为主流框架，推动前端的组件化，和工程化，让PC端、安卓端、iOS端有了“大一统”的趋势。</strong></p><p>随着React、Vue等框架的出现，“<strong>一次学习，多端受用</strong>”也在前端工程师间传开。</p><p>现在掌握并精通React、Vue等主流框架的前端开发工程师成为企业青睐的人才！经调研，黑马程序员发现，在目前的招聘需求中，<strong>有59.2%会要求前端开发工程师掌握Vue框架，37.7%会要求掌握React框架。</strong></p><p>随着企业需求的增多，前端开发工程师的薪资也越来越高，据第三方平台职友集最新统计，前端开发工程师在全国的平均薪资已经突破<strong>16.6k</strong>！在一线城市北京更是高达<strong>22.8k</strong>！</p><h2 id="前端岗位的要求是怎样的" tabindex="-1"><strong>前端岗位的要求是怎样的？</strong> <a class="header-anchor" href="#前端岗位的要求是怎样的" aria-label="Permalink to &quot;**前端岗位的要求是怎样的？**&quot;">​</a></h2><p><strong>面试真的这么难吗？</strong></p><p>Web前端工程师要求具备哪些技能？Web前端工程师必须得掌握HTML、CSS和JavaScrip，必须对这三门语言很精通，能够运用它们完成大多数任务。一位好的Web前端开发工程师在知识体系上不仅要有广度还要有深度，很多大公司即使出高薪也很难招聘到理想的前端开发工程师。</p><p>Web前端工程师要根据业务需求文档完成前端研发工作；与后端研发人员配合讨论交互方式页面集成工作；对页面性能的优化和维护持续提升用户体验；改进和优化开发流程、工具和框架，搭建基础设施，提高开发效率；研究Web前端技术的发展，富Web交互方式；前端组件封装、可视化组件设计开发编写说明文档</p><p>Web前端工程师岗位要求：</p><p>A公司要求：</p><p>1、两年以上前端开发工作经验，独立完成项目前端代码工作；</p><p>2、扎实的前端基础知识：HTML5、JavaScript，CSS/CSS3等Web标准技术；</p><p>3、熟练掌握Vue.js、Element-UI、BootStrap、react等前端框架，熟悉微信原生小程序开发；</p><p>4、熟练掌握Ajax、HTTP等基础知识了解跨域机制；</p><p>5、熟练掌握常用布局方式以及浏览器和移动设备兼容性。能够解决浏览器兼容和屏幕自适应问题；</p><p>6、对网站前端性能优化有一定了解；</p><p>7、对交互设计、用户体验有一定程度的理解，有良好的编码习惯，清晰，简洁，层次明了，易于维护。</p><p>B公司要求：</p><ol><li><p>熟练掌握web及前端技术（包括 HTML，CSS，JavaScript，AJAX，JSON）</p></li><li><p>JavaScript程序模块开发，通用类库、框架编写</p></li><li><p>配合后端开发人员完成数据交互，动态信息展现等工作</p></li><li><p>熟悉vue可以使用vue进行前端开发</p></li><li><p>能熟练对前端页面样式进行调整与美化，满足UI的设计要求</p></li><li><p>思路清晰，学习能力强，善于分析问题</p></li><li><p>根据产品需求，分析并给出最优的页面前端结构解决方案</p></li><li><p>熟悉HTTP协议,熟悉websocket协议，对长连接短链接有一定理解。</p></li></ol><p>Web前端开发在产品开发中把网站的界面更好地呈现给用户，其作用变得越来越重要需要专业的前端工程师才能做好。Web前端开发是一项很特殊的工作涵盖的知识面非常广，既有具体的技术又有抽象的理念。</p><p>如果问到前端工程师的岗位职责，这就不得不说现在前端行业存在的一种现象，有太多人<strong>会切几张图, 会用jQuery做个特效, 会用html游戏框架写个flappy bird, 会在Github里找各种模板和库拼拼凑凑......</strong> 就敢声称自己为前端工程师。</p><p>一个合格的前端需要扎实且前沿的知识体系，**新形势下企业更注重前端工程师的综合能力。**现在，物联网、大数据可视化、云计算、VR/AR、5G等新技术接踵而至，现在的前端工程师除了普通的编码以外，还要考虑如何性能优化；如何跨端、跨平台实现功能；如何与新技术相结合等诸多问题。</p><p>根据相关报道，现在初级前端开发工程师供大于求，并且薪酬相对较低，月薪从4000元到8000元不等，通常不超过10000元。</p><p>然而，<strong>企业真正需要的是中级和高级前端开发工程师，年薪通常在30万元以上。<strong>播妞通过总结各大招聘网站的岗位需求发现，要求任职者必须具备至少</strong>一到两项专精技能和实战开发经验</strong>，如果能掌握前端开发领域的<a href="https://www.zhihu.com/search?q=%E5%85%A8%E6%A0%88%E6%8A%80%E6%9C%AF&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2517017216%7D" target="_blank" rel="noreferrer">全栈技术</a>就会更吃香了。</p><p>正值“金三银四”求职黄金期，加上当下企业对人才的需求猛增，**前端人才所面临的求职竞争将愈发激烈。**如果想要从中脱颖而出，就要在自身的技术硬实力上下功夫。</p><h2 id="前端详细学习路线图" tabindex="-1">前端详细学习路线图 <a class="header-anchor" href="#前端详细学习路线图" aria-label="Permalink to &quot;前端详细学习路线图&quot;">​</a></h2><p>**阶段一基础入门：**入门前端工程师的必备技能，能够完成PC端和移动端的静态页面，具备1:1还原设计图的能力。</p><p>**阶段二技术进阶：**进阶成为合格的初级前端工程师，能够实现页面的交互效果，实现与后端的数据联通。</p><p>**阶段三Vue开发：**成为中高级前端工程师的核心能力，能够实现企业级项目的功能需求，并具备<a href="https://www.zhihu.com/search?q=%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2517017216%7D" target="_blank" rel="noreferrer">内容管理系统</a>、企业中台以及电商平台的项目经验。</p><p>阶段四**React &amp; 小程序开发：**成为中高级前端工程师的进阶技能，能够满足市面上90%+公司的招聘需求，并具备网页端和移动端项目研发经验。</p><p>阶段五**面试就业：**能够完善简历，轻松应对企业面试场景与面试题目，成功获得心仪的offer。</p><ul><li>腾讯AlloyTeam</li><li>印记中文</li><li>奇舞周刊</li><li>前端大全</li><li>前端外刊评论</li><li>前端早读课</li><li>前端之巅</li><li>凹凸实验室</li><li>Node地下铁</li><li>FEX</li><li>W3cplus</li><li>w3ctech</li></ul><hr><p><a href="https://link.zhihu.com/?target=https%3A//github.com/qianguyihao/Web" target="_blank" rel="noreferrer">https://github.com/qianguyihao/Web</a></p><p>这是一个大佬总结的知识点，特别全且清晰，所以分享出来</p><p><img src="https://pic1.zhimg.com/80/v2-c032d1015f713d09a848774aeb12a0dc_720w.webp" alt="img"></p><hr><blockquote><p><strong>书籍推荐：</strong><a href="https://link.zhihu.com/?target=https%3A//github.com/Hard-workingrookie/javasrcipt-design-pattern" target="_blank" rel="noreferrer">《JavaScript设计模式与开发实践》</a> 《你不知道的JavaScript》、《CSS揭秘》《JavaScript忍者秘籍》、《JavaScript高级程序设计第四版》、《the road to learn react》《学习JavaScript数据结构与算法》 ❤️ 私聊进群，已发在群里 ❤️</p><p><strong>知识图谱：➡️</strong> <a href="https://link.zhihu.com/?target=https%3A//f2e.tech/%3Fspm%3Da21iq3.home.0.0.33632764LDFLoU" target="_blank" rel="noreferrer">阿里巴巴知识图谱</a><strong><a href="https://link.zhihu.com/?target=https%3A//whjin.github.io/frontend-dev-doc/" target="_blank" rel="noreferrer">前端开发文档</a></strong></p></blockquote><p><img src="https://pic4.zhimg.com/80/v2-de8d216f6e18eb0e6502b3318d6aa0b3_720w.webp" alt="img"></p><h2 id="一、编辑器" tabindex="-1">一、编辑器： <a class="header-anchor" href="#一、编辑器" aria-label="Permalink to &quot;一、编辑器：&quot;">​</a></h2><ol><li><strong>VSCode (推荐使用)</strong></li></ol><p><a href="https://link.zhihu.com/?target=https%3A//www.jspang.com/detailed%3Fid%3D60" target="_blank" rel="noreferrer">技术胖-VSCode常用插件和技巧教程www.jspang.com/detailed?id=60<img src="https://pic2.zhimg.com/v2-631265149cc182e4ec28dfc6e969bb81_180x120.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//code.visualstudio.com/" target="_blank" rel="noreferrer">Visual Studio Code - Code Editing. Redefinedcode.visualstudio.com/<img src="https://pic4.zhimg.com/v2-beaba009c542a9f6fe1d2034a7ed568b_180x120.jpg" alt="img"></a></p><ol><li>WebStorm</li><li>Atom</li><li>Sublime</li></ol><hr><p><a href="https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV14J4114768%3Ffrom%3Dsearch%26seid%3D7000402704669507889" target="_blank" rel="noreferrer">黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibiliwww.bilibili.com/video/BV14J4114768?from=search&amp;seid=7000402704669507889<img src="https://pic3.zhimg.com/v2-367347a2e8140849afde2c6a00937902_180x120.jpg" alt="img"></a></p><hr><h2 id="二、html" tabindex="-1">二、HTML <a class="header-anchor" href="#二、html" aria-label="Permalink to &quot;二、HTML&quot;">​</a></h2><ul><li>常用标签</li><li>表单</li><li>HTML</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.runoob.com/html/html-tutorial.html" target="_blank" rel="noreferrer">HTML 教程 | 菜鸟教程</a></p><h2 id="三、css" tabindex="-1">三、CSS <a class="header-anchor" href="#三、css" aria-label="Permalink to &quot;三、CSS&quot;">​</a></h2><ul><li><strong>基本语法</strong></li><li><strong>布局（<strong>浮动<code>float</code>、定位<code>position</code>、盒模型、<code>flex</code>、<code>grid/layout</code></strong>)</strong></li><li><strong>响应式布局</strong></li><li>viewport（用户网页的可视区域）</li></ul><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span></span></code></pre></div><ul><li>流动布局（fluid grid）</li><li>媒体监听<code>@media</code></li></ul><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> only</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> screen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> and</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .gridmenu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">         width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }  </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>移动端适配</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.runoob.com/css/css-tutorial.html" target="_blank" rel="noreferrer">CSS 教程 | 菜鸟教程</a></p><hr><h2 id="四、js-特别重要-将时间多花点在js上" tabindex="-1">四、JS(特别重要，将时间多花点在JS上) <a class="header-anchor" href="#四、js-特别重要-将时间多花点在js上" aria-label="Permalink to &quot;四、JS(特别重要，将时间多花点在JS上)&quot;">​</a></h2><p><a href="https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1YW411T7GX%3Ffrom%3Dsearch%26seid%3D10104038366788666376" target="_blank" rel="noreferrer">尚硅谷JS 入门 视频 B站</a></p><ul><li><strong>基本语法</strong></li><li><strong>函数</strong></li></ul><ol><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023021087191360" target="_blank" rel="noreferrer">函数定义和调用</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023021187855808" target="_blank" rel="noreferrer">变量作用域与解构赋值</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023023754768768" target="_blank" rel="noreferrer">方法</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023021271742944" target="_blank" rel="noreferrer">高阶函数</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023021250770016" target="_blank" rel="noreferrer">闭包</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080" target="_blank" rel="noreferrer">箭头函数</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112" target="_blank" rel="noreferrer">generator</a></li></ol><ul><li><strong>标准对象</strong></li><li><strong>面向对象编程</strong></li></ul><ol><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023022043494624" target="_blank" rel="noreferrer">创建对象</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072" target="_blank" rel="noreferrer">原型继承</a></li><li><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312/1072866346339712" target="_blank" rel="noreferrer">class继承</a></li></ol><ul><li><strong>ES6+</strong></li><li><strong>this、call、apply</strong></li><li><strong>异步（</strong><code>Ajax</code><strong>、</strong><code>promise</code><strong>、</strong><code>async/await</code><strong>）</strong></li><li>**设计模式（<strong>推荐看书</strong>《JavaScript设计模式与开发实践》）,**将js都学完再来看设计模式</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//zh.javascript.info/" target="_blank" rel="noreferrer">现代 JavaScript 教程zh.javascript.info/<img src="https://pic4.zhimg.com/v2-371dd24f02bbb7f17ea00a910ff8f70b_180x120.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//es6.ruanyifeng.com/" target="_blank" rel="noreferrer">ES6 入门教程es6.ruanyifeng.com/</a></p><p><a href="https://link.zhihu.com/?target=https%3A//www.runoob.com/js/js-variables.html" target="_blank" rel="noreferrer">JavaScript 变量 | 菜鸟教程www.runoob.com/js/js-variables.html</a></p><p><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/1022910821149312" target="_blank" rel="noreferrer">JavaScript教程www.liaoxuefeng.com/wiki/1022910821149312<img src="https://pic4.zhimg.com/v2-94d0707719a0e1571384a066f4d90b7b_180x120.jpg" alt="img"></a></p><blockquote><p>目前很多公司都使用了Typescript，面试的时候大都会问你会不会ts,所以伙伴们也要学习起来了。</p></blockquote><p><a href="https://link.zhihu.com/?target=https%3A//ts.xcatliu.com/basics/primitive-data-types.html" target="_blank" rel="noreferrer">原始数据类型 · TypeScript 入门教程ts.xcatliu.com/basics/primitive-data-types.html</a></p><hr><blockquote><p>在你学习完HTML+CSS+JS后，还没有学框架（react、vue、angular），但是又想练练手，做些小demo，此时有一个开源库会适合你：<strong><a href="https://link.zhihu.com/?target=https%3A//github.com/bradtraversy/50projects50days" target="_blank" rel="noreferrer">50个demo</a></strong> ，当然工作了或者学完框架后的小伙伴如果感觉基础没有学好，也可以回来练练这个。</p></blockquote><h2 id="五、版本管理工具git" tabindex="-1">五、版本管理工具Git <a class="header-anchor" href="#五、版本管理工具git" aria-label="Permalink to &quot;五、版本管理工具Git&quot;">​</a></h2><h2 id="推荐使用软件-tower-sourcetree" tabindex="-1">推荐使用软件（Tower/sourcetree) <a class="header-anchor" href="#推荐使用软件-tower-sourcetree" aria-label="Permalink to &quot;推荐使用软件（Tower/sourcetree)&quot;">​</a></h2><p><img src="https://pic4.zhimg.com/80/v2-1a5a78ba5e4bcdbe5a0fff4089dc568f_720w.webp" alt="img"></p><p><img src="https://pic2.zhimg.com/80/v2-3d524f26970613e71e2ced426db80d2d_720w.webp" alt="img"></p><p>快捷方便，commit 、push、 pull、 checkout 、merge、 restore、 rename等等，一键搞定</p><p><a href="https://link.zhihu.com/?target=https%3A//github.com/" target="_blank" rel="noreferrer">https://github.com/github.com/</a></p><p><a href="https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1Mf4y117f3%3Ffrom%3Dsearch%26seid%3D10987880512517365800" target="_blank" rel="noreferrer">2020最新Git教程（2小时从入门到精通）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com/video/BV1Mf4y117f3?from=search&amp;seid=10987880512517365800<img src="https://pic1.zhimg.com/v2-ef0971a5fa2a32d472ef30b4a8533f40_180x120.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//backlog.com/git-tutorial/cn/intro/intro1_1.html" target="_blank" rel="noreferrer">https://backlog.com/git-tutorial/cn/intro/intro1_1.htmlbacklog.com/git-tutorial/cn/intro/intro1_1.html<img src="https://pic4.zhimg.com/v2-dfbbbdd0d8696de4d5e77fd2ecfeecf3_180x120.jpg" alt="img"></a></p><ul><li>工作流程</li></ul><p><img src="https://pic4.zhimg.com/80/v2-4da51a165e7fbeba06f782eed69dd94b_720w.webp" alt="img"></p><ul><li><strong>创建仓库</strong></li></ul><p>git init</p><ul><li>基<strong>本操作</strong></li></ul><ol><li>git clone</li><li>git add</li><li>git diff</li><li>git commit</li><li>git rm</li><li>git reset HEAD</li></ol><ul><li><strong>分支管理</strong></li></ul><ol><li>git branch (branchname)</li><li>git merge</li><li>git rebase (branchname)</li></ol><blockquote><p>这是本人记录的比较常用的一些指令</p></blockquote><p><a href="https://link.zhihu.com/?target=https%3A//www.yuque.com/u2417328/rlt5do/nmgh6x" target="_blank" rel="noreferrer">Git 指令 牢记 · 语雀</a></p><ul><li><strong>使用github搭建个人博客，可用以下</strong></li></ul><ol><li>hexo</li><li>gatsby</li><li>vuePress</li></ol><p><a href="https://link.zhihu.com/?target=https%3A//www.liaoxuefeng.com/wiki/896043488029600" target="_blank" rel="noreferrer">Git教程www.liaoxuefeng.com/wiki/896043488029600<img src="https://pic3.zhimg.com/v2-23dad9e5cdf40848a5ad1c72bf5de2c6_180x120.jpg" alt="img"></a></p><blockquote><p>很多公司都实行Code Review， 排查问题，提高代码质量、统一风格，团队合作建议实施code review，可以多参考借鉴成熟并且有效的code review规范。</p></blockquote><hr><h2 id="六、node-不用学太深" tabindex="-1">六、Node(不用学太深) <a class="header-anchor" href="#六、node-不用学太深" aria-label="Permalink to &quot;六、Node(不用学太深)&quot;">​</a></h2><p><strong>包管理</strong></p><ul><li><strong>npm （相当于手机里的应用商店，可以下载很多软件包）</strong></li></ul><ol><li><code>npm install &lt;package-name&gt; </code>(安装单个软件包)</li><li><code>npm update &lt;package-name&gt;</code> (更新软件包)</li><li><code>npm run &lt;task-name&gt; </code>(运行任务)</li><li><code>npm uninstall &lt;package-name&gt;(</code>卸载 npm 软件包)</li><li><code>-g</code>标志可以执行全局安装</li><li><code>-S</code>就是<code>--save</code>的简写</li><li><code>-D</code>就是<code>--save-dev</code> 这样安装的包的名称及版本号就会存在<code>package.json</code>的<code>devDependencies</code>这个里面，而--save会将包的名称及版本号放在<code>dependencies</code>里面。</li></ol><ul><li><strong>yarn</strong></li><li><strong>npx</strong></li></ul><p>常用包</p><ul><li>文件读写fs</li><li>路径查找path</li><li>网络http</li></ul><p><a href="https://link.zhihu.com/?target=http%3A//nodejs.cn/learn" target="_blank" rel="noreferrer">Node.js 简介nodejs.cn/learn<img src="https://pic4.zhimg.com/v2-4db4298890c8e588b2cd12ec7ad34087_ipico.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//nqdeng.github.io/7-days-nodejs/" target="_blank" rel="noreferrer">七天学会NodeJSnqdeng.github.io/7-days-nodejs/</a></p><hr><blockquote><p><em>相关</em></p></blockquote><h3 id="express-js-node-js-的优化版" tabindex="-1">express.js (node.js 的优化版） <a class="header-anchor" href="#express-js-node-js-的优化版" aria-label="Permalink to &quot;express.js (node.js 的优化版）&quot;">​</a></h3><p><a href="https://link.zhihu.com/?target=https%3A//www.expressjs.com.cn/" target="_blank" rel="noreferrer">Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档www.expressjs.com.cn/</a></p><p><strong>koa</strong> <strong>(基于node.js的web开发框架)</strong></p><p><a href="https://link.zhihu.com/?target=https%3A//koa.bootcss.com/" target="_blank" rel="noreferrer">Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架koa.bootcss.com/<img src="https://pic3.zhimg.com/v2-5b8a65f6e94712dfacbe908e5dd086d2_180x120.jpg" alt="img"></a></p><h2 id="七、构建工具" tabindex="-1">七、构建工具 <a class="header-anchor" href="#七、构建工具" aria-label="Permalink to &quot;七、构建工具&quot;">​</a></h2><h3 id="自动化构建" tabindex="-1">自动化构建 <a class="header-anchor" href="#自动化构建" aria-label="Permalink to &quot;自动化构建&quot;">​</a></h3><ol><li><code>npm script</code></li></ol><p>npm 允许在 <code>package.json</code> 文件里面，使用 <code>scripts</code> 字段定义脚本命令</p><p><a href="https://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2016/10/npm_scripts.html" target="_blank" rel="noreferrer">npm scripts 使用指南</a></p><blockquote><p>相关</p></blockquote><ul><li><strong>gulp</strong></li><li><strong>模块化打包</strong></li><li><strong>webpack(推荐)</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.webpackjs.com/concepts/" target="_blank" rel="noreferrer">概念 | webpack 中文网www.webpackjs.com/concepts/</a></p><p><a href="https://link.zhihu.com/?target=https%3A//github.com/ruanyf/webpack-demos" target="_blank" rel="noreferrer">ruanyf/webpack-demosgithub.com/ruanyf/webpack-demos<img src="https://pic2.zhimg.com/v2-561dfb11c7e141a474bdd92090c03035_ipico.jpg" alt="img"></a></p><ul><li><strong>Vite (推荐)</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//cn.vitejs.dev/" target="_blank" rel="noreferrer">Vite 官方中文文档cn.vitejs.dev/</a></p><ul><li><strong>Rollup</strong></li><li><strong>Snowpack</strong></li><li><strong>Parcel</strong></li><li><strong>grunt</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//grunt.docschina.org/" target="_blank" rel="noreferrer">Grunt: The JavaScript 世界的构建工具 - Grunt中文grunt.docschina.org/<img src="https://pic4.zhimg.com/v2-434aedca1195b83c3b36e05b3e728b47_ipico.jpg" alt="img"></a></p><hr><h2 id="八、css预处理" tabindex="-1">八、CSS预处理 <a class="header-anchor" href="#八、css预处理" aria-label="Permalink to &quot;八、CSS预处理&quot;">​</a></h2><ul><li>Sass(推荐）</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.sass.hk/docs/" target="_blank" rel="noreferrer">Sass教程 Sass中文文档 | Sass中文网www.sass.hk/docs/</a></p><ul><li>PostCss</li><li>Stylus</li><li>Less</li></ul><p>转载</p><p><a href="https://link.zhihu.com/?target=https%3A//www.jianshu.com/p/9d84bb5043bb" target="_blank" rel="noreferrer">CSS 预处理器 sass,less,stylus优缺点</a></p><hr><h2 id="九、js框架-没有好与不好-只有适不适合" tabindex="-1">九、JS框架(没有好与不好，只有适不适合) <a class="header-anchor" href="#九、js框架-没有好与不好-只有适不适合" aria-label="Permalink to &quot;九、JS框架(没有好与不好，只有适不适合)&quot;">​</a></h2><ul><li><strong>React(推荐）</strong></li></ul><blockquote><p><strong>官方文档 一定一定 要仔细的 从头到尾 多看 几遍 ！！！！</strong></p></blockquote><p><a href="https://link.zhihu.com/?target=https%3A//react.docschina.org/docs/getting-started.html" target="_blank" rel="noreferrer">开始 – Reactreact.docschina.org/docs/getting-started.html<img src="https://pic1.zhimg.com/v2-cba0b89d2bf2d96a1ed26edb5849f804_180x120.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//jspang.com/detailed%3Fid%3D56" target="_blank" rel="noreferrer">技术胖-React学习路线-按此路线学习顺畅无比jspang.com/detailed?id=56<img src="https://pic2.zhimg.com/v2-6c38c1545f97dd0fc9d751c8ef85b955_ipico.jpg" alt="img"></a></p><ol><li><a href="https://link.zhihu.com/?target=https%3A//redux.js.org/" target="_blank" rel="noreferrer">Redux</a>(<a href="https://link.zhihu.com/?target=https%3A//redux-toolkit-cn.netlify.app/introduction/quick-start/" target="_blank" rel="noreferrer">redux-toolkit</a>)</li><li><a href="https://link.zhihu.com/?target=https%3A//zh-hans.reactjs.org/docs/hooks-intro.html" target="_blank" rel="noreferrer">React Hooks</a></li><li>Mobx</li><li>React-router</li></ol><blockquote><p>想学习源码的 1.<a href="https://link.zhihu.com/?target=https%3A//react.iamkasong.com/" target="_blank" rel="noreferrer">React技术揭秘</a> 2. <a href="https://link.zhihu.com/?target=https%3A//bogdan-lyashenko.github.io/Under-the-hood-ReactJS/stack/languages/chinese/book/Intro.html" target="_blank" rel="noreferrer">Under-the-hood-ReactJS</a> 3. <a href="https://link.zhihu.com/?target=https%3A//pomb.us/build-your-own-react/" target="_blank" rel="noreferrer">Build your own React</a></p></blockquote><ul><li><strong>Vue（推荐）</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//cn.vuejs.org/v2/guide/" target="_blank" rel="noreferrer">介绍 — Vue.jscn.vuejs.org/v2/guide/<img src="https://pic3.zhimg.com/v2-cf23526f451784ff137f161b8fe18d5a_ipico.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//jspang.com/detailed%3Fid%3D57" target="_blank" rel="noreferrer">技术胖-Vue2.x学习路线-按次路线学习顺畅无比jspang.com/detailed?id=57<img src="https://pic2.zhimg.com/v2-6c38c1545f97dd0fc9d751c8ef85b955_ipico.jpg" alt="img"></a></p><ol><li>Vuex</li><li>Vue-router</li></ol><blockquote><p>学习源码<a href="https://link.zhihu.com/?target=https%3A//vue-js.com/learn-vue/" target="_blank" rel="noreferrer">Vue源码系列-Vue中文社区</a></p></blockquote><ul><li><strong>Angular</strong></li></ul><ol><li>RxJS （异步优化）</li><li>NgRx</li></ol><hr><h2 id="十、css框架" tabindex="-1">十、CSS框架 <a class="header-anchor" href="#十、css框架" aria-label="Permalink to &quot;十、CSS框架&quot;">​</a></h2><ul><li><strong>Antd(推荐)</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//ant.design/index-cn" target="_blank" rel="noreferrer">Ant Design - 一套企业级 UI 设计语言和 React 组件库ant.design/index-cn<img src="https://pic1.zhimg.com/v2-c924155285cdba2f57cbd751674c1bb0_ipico.jpg" alt="img"></a></p><ul><li><strong>Element UI（推荐）</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//element.eleme.cn/" target="_blank" rel="noreferrer">The world&#39;s most popular Vue UI frameworkelement.eleme.cn/</a></p><ul><li>Material UI</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//material-ui.com/" target="_blank" rel="noreferrer">Material-UI: A popular React UI frameworkmaterial-ui.com/<img src="https://pic1.zhimg.com/v2-d2b1e19091a3530dfb8bec06b5a926dc_ipico.jpg" alt="img"></a></p><ul><li>Bootstrap</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.bootcss.com/" target="_blank" rel="noreferrer">Bootstrap中文网www.bootcss.com/<img src="https://pic2.zhimg.com/v2-1a979ca625042c754b874f1cfeaf3129_180x120.jpg" alt="img"></a></p><ul><li>semantic UI</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//semantic-ui.com/" target="_blank" rel="noreferrer">Semantic UIsemantic-ui.com/<img src="https://pic4.zhimg.com/v2-d6658ee931e117d6c9414a267569b953_ipico.jpg" alt="img"></a></p><p>vant (移动端）</p><p><a href="https://link.zhihu.com/?target=https%3A//youzan.github.io/vant/%23/zh-CN/" target="_blank" rel="noreferrer">https://youzan.github.io/vant/#/zh-CN/youzan.github.io/vant/#/zh-CN/</a></p><p>Mobile UI</p><p><a href="https://link.zhihu.com/?target=https%3A//youzan.github.io/vant/%23/zh-CN/" target="_blank" rel="noreferrer">Mobile UI Components built on Vueyouzan.github.io/vant/#/zh-CN/</a></p><p>目前 Vant 官方提供了<a href="https://link.zhihu.com/?target=https%3A//vant-contrib.gitee.io/vant" target="_blank" rel="noreferrer">Vue 版本</a>和<a href="https://link.zhihu.com/?target=http%3A//vant-contrib.gitee.io/vant-weapp" target="_blank" rel="noreferrer">微信小程序版本</a>，并由社区团队维护<a href="https://link.zhihu.com/?target=https%3A//github.com/mxdi9i7/vant-react" target="_blank" rel="noreferrer">React 版本</a>。</p><hr><h2 id="十一、css优化方案" tabindex="-1">十一、CSS优化方案 <a class="header-anchor" href="#十一、css优化方案" aria-label="Permalink to &quot;十一、CSS优化方案&quot;">​</a></h2><ul><li><strong>Styled-Component(推荐)</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//styled-components.com/" target="_blank" rel="noreferrer">styled-components</a></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styled </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;styled-components&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Wrapper</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styled.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">section</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  margin: 0 auto;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  width: 300px;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  text-align: center;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Button</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> styled.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  width: 100px;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  color: white;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  background: skyblue;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">render</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Wrapper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello World&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Wrapper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><ul><li><strong>CSS Modules（推荐）</strong></li></ul><p>Styled JSX</p><ul><li><a href="https://link.zhihu.com/?target=https%3A//emotion.sh/docs/introduction" target="_blank" rel="noreferrer">emotion</a></li><li><a href="https://link.zhihu.com/?target=https%3A//glamorous.rocks/" target="_blank" rel="noreferrer">glamorous</a></li></ul><hr><h2 id="十二、性能" tabindex="-1">十二、性能 <a class="header-anchor" href="#十二、性能" aria-label="Permalink to &quot;十二、性能&quot;">​</a></h2><p>白屏、卡顿、页面加载失败、页面跳转慢、图片空窗、崩溃、耗电等问题一直都是用户频繁舆情反馈的痛点。</p><ul><li><strong>性能指标</strong></li></ul><ol><li>白屏时间</li><li>首屏时间</li><li>用户可操作时间</li><li>页面总下载时间</li><li>请求数量</li></ol><ul><li><strong>RAIL模型</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000010512899" target="_blank" rel="noreferrer">人类身份验证 - SegmentFaultsegmentfault.com/a/1190000010512899</a></p><ul><li><strong>LightHouse指标</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//blog.csdn.net/Napoleonxxx/article/details/85077418" target="_blank" rel="noreferrer">玩转Lighthouse-全方位提高网站各项指标的实践_辰辰沉沉大辰沉-CSDN博客_lighthouse报告blog.csdn.net/Napoleonxxx/article/details/85077418<img src="https://pic3.zhimg.com/v2-3d6f0b0cdd7632882b0ca6d20143ea66_ipico.jpg" alt="img"></a></p><ul><li><strong>DevTools</strong></li><li><strong>PWA</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.jianshu.com/p/098af61bbe04" target="_blank" rel="noreferrer">2019前端必会黑科技之PWAwww.jianshu.com/p/098af61bbe04<img src="https://pic1.zhimg.com/v2-b8214676408fdcfe922afef51ef51414_180x120.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1wt411E7QD%3Ffrom%3Dsearch%26seid%3D7258704753153037754" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV1wt411E7QD?from=search&amp;seid=7258704753153037754www.bilibili.com/video/BV1wt411E7QD?from=search&amp;seid=7258704753153037754</a></p><ul><li><strong>Service Worker</strong></li><li><strong>骨架屏</strong>（骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。）</li></ul><p><img src="https://pic1.zhimg.com/80/v2-c5707217415ba67d2dbd7097bed28278_720w.webp" alt="img"></p><ul><li><strong>gzip</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000012571492" target="_blank" rel="noreferrer">https://segmentfault.com/a/1190000012571492segmentfault.com/a/1190000012571492<img src="https://pic4.zhimg.com/v2-5092c1c57d07ccf096bca3b466d8ecf7_ipico.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000012571492" target="_blank" rel="noreferrer">前端性能优化之gzip_个人文章 - SegmentFault 思否</a></p><p><a href="https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000012571492" target="_blank" rel="noreferrer">前端性能优化之gzip_个人文章 - SegmentFault 思否segmentfault.com/a/1190000012571492<img src="https://pic4.zhimg.com/v2-5092c1c57d07ccf096bca3b466d8ecf7_ipico.jpg" alt="img"></a></p><ul><li><strong>懒加载和预加载</strong></li><li>**包分析工具（**构建代码之后，明白到底是什么占用了那么多空间？可以使用 webpack-bundle-analyzer）</li><li><strong>防抖、节流</strong>（优化高频率执行js代码的一种手段，js中的一些事件如浏览器的<code>resize</code>、<code>scroll</code>，鼠标的<code>mousemove</code>、<code>mouseover</code>，<code>input</code>输入框的<code>keypress</code>等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。）</li></ul><hr><h2 id="十三、数据可视化" tabindex="-1">十三、数据可视化 <a class="header-anchor" href="#十三、数据可视化" aria-label="Permalink to &quot;十三、数据可视化&quot;">​</a></h2><ul><li><strong>ECharts(推荐)</strong></li></ul><p>实例</p><p><a href="https://link.zhihu.com/?target=https%3A//echarts.apache.org/examples/zh/index.html" target="_blank" rel="noreferrer">Examples - Apache ECharts (incubating)echarts.apache.org/examples/zh/index.html</a></p><p><a href="https://link.zhihu.com/?target=https%3A//echarts.apache.org/zh/index.html" target="_blank" rel="noreferrer">Apache ECharts (incubating)echarts.apache.org/zh/index.html<img src="https://pic4.zhimg.com/v2-31b0d704161201f76e38d07c7be2ffcf_180x120.jpg" alt="img"></a></p><ul><li><strong>AntV</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//antv.vision/zh" target="_blank" rel="noreferrer">AntVantv.vision/zh<img src="https://pic3.zhimg.com/v2-c9a2f86510c6800e2564bd3da07e7be2_ipico.jpg" alt="img"></a></p><ul><li><strong>HighChat</strong></li><li><strong>ucharts(小程序)</strong></li></ul><hr><h2 id="十四、移动端应用-android-studio-xcode" tabindex="-1">十四、移动端应用（Android Studio / XCode） <a class="header-anchor" href="#十四、移动端应用-android-studio-xcode" aria-label="Permalink to &quot;十四、移动端应用（Android Studio / XCode）&quot;">​</a></h2><ul><li><strong>React Native(推荐)</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//reactnative.cn/docs/getting-started" target="_blank" rel="noreferrer">搭建开发环境 · React Native 中文网reactnative.cn/docs/getting-started<img src="https://pic1.zhimg.com/v2-6b020b8e1379bb13258cd422f40b3474_ipico.jpg" alt="img"></a></p><blockquote><p>*<strong>React Native 插件汇总：*</strong></p></blockquote><ul><li><p>react-native-linear-gradient 颜色渐变处理</p></li><li><p>react-native-login 视频界面登录</p></li><li><p>react-native-keyboard-aware-scroll-view 键盘显示处理</p></li><li><p>react-native-popup-dialog 弹窗</p></li><li><p>react-native-dropdownalert 一种非常漂亮的alert弹窗方式，从状态栏往下弹窗；</p></li><li><p>react-native-simple-radio-button 单选按钮；</p></li><li><p>react-native-swiper</p></li><li><p>react-native-macos macos桌面应用</p></li><li><p>react-native-wechat 集成微信相关SDK</p></li><li><p>react-native-modalbox 模态弹窗</p></li><li><p>react-native-touch-id 指纹登录</p></li><li><p>react-native-prompt 可输入文字的弹窗</p></li><li><p>react-native-sqlite-storage sqlite数据库存储</p></li><li><p>react-native-permissions 权限检查</p></li><li><p>react-native-progress-hud loading圈</p></li><li><p>react-native-snackbar 类似toast的弹窗模式</p></li><li><p>react-native-qrcode-svg 二维码生产工具</p></li><li><p>native-base UI组件</p></li><li><p>react-native-busy-indicator loading圈</p></li><li><p>react-native-fit-image 图片展示优化</p></li><li><p>react-native-timer 定时器管理</p></li><li><p>react-native-scrollable-tab-view 可以左右滑动的tab</p></li><li><p>react-native-zip-archive 解压工具</p></li><li><p>react-native-xml2js</p></li><li><p>react-native-spinkit 好看的loading圈</p></li><li><p>react-native-interactable 有很强交互效果的table视图</p></li><li><p>react-native-pull-to-refresh 下拉刷新效果</p></li><li><p>react-native-deck-swiper 不错的swiper效果</p></li><li><p>react-native-prefix-picker select效果</p></li><li><p>react-native-gesture-helper 手势 向上还是向下 还是向左</p></li><li><p>react-native-drawer-layout 抽屉效果</p></li><li><p>react-native-sortable-listview 可拖拽排序的列表视图</p></li><li><p>react-native-progress 进度条 长方形 圆形</p></li><li><p>react-native-splash-screen 启动屏处理</p></li><li><p>react-native-masked-text 指定格式的输入框</p></li><li><p>react-native-keyboard-manager 针对IOS 键盘遮挡的问题 俺可以这么用android:windowSoftInputMode=&quot;adjustResize&quot;</p></li><li><p>react-native-beacons-manager 蓝牙处理</p></li><li><p>react-native-fetch-blob 文件获取</p></li><li><p>react-native-popup-menu 弹出菜单</p></li><li><p>react-native-pathjs-charts 图表</p></li><li><p>react-native-dates 日历日期选择工具</p></li><li><p>react-native-calendar-strip 一种简单的日历处理</p></li><li><p>react-native-simple-markdown 简单的markdown文本编辑器</p></li><li><p>react-native-image-progress 进度条</p></li><li><p>react-native-img-cache 图片缓存技术</p></li><li><p>rn-placeholder 在展示具体的文字和图片之前有个加载样式处理</p></li><li><p>react-native-pie-chart 饼状图</p></li><li><p>react-native-maps 地图</p></li><li><p>react-native-loading-overlay loading圈加载遮罩</p></li><li><p>react-native-progress 圆形进度条 <a href="https://link.zhihu.com/?target=https%3A//www.jianshu.com/p/d0742d421b7c" target="_blank" rel="noreferrer">react-native 圆形进度条</a></p></li><li><p>react-native-modal 弹窗插件 <a href="https://link.zhihu.com/?target=https%3A//www.npmjs.com/package/react-native-modal" target="_blank" rel="noreferrer">react-native-modal</a></p></li><li><p>react-native-extra-dimensions-android 安卓水滴屏获取屏幕高度 <a href="https://link.zhihu.com/?target=https%3A//github.com/Sunhat/react-native-extra-dimensions-android" target="_blank" rel="noreferrer">Sunhat/react-native-extra-dimensions-android</a></p></li><li><p><strong>Weex(<strong>阿里巴巴旗下的跨平台移动开发解决方案</strong>)</strong></p></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1Wx411s7PC%3Ffrom%3Dsearch%26seid%3D7952335917735607106" target="_blank" rel="noreferrer">技术胖的WEEX入门到实战视频教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com/video/BV1Wx411s7PC?from=search&amp;seid=7952335917735607106<img src="https://pic2.zhimg.com/v2-7a123ae26344ae0d266fe7844d938fc5_180x120.jpg" alt="img"></a></p><ul><li><strong>Flutter</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//flutterchina.club/get-started/install/" target="_blank" rel="noreferrer">起步:安装Flutter - Flutter中文网flutterchina.club/get-started/install/<img src="https://pic3.zhimg.com/v2-b5aa93e0b61d8c9784cf76d14886ea46_ipico.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//jspang.com/detailed%3Fid%3D58" target="_blank" rel="noreferrer">技术胖-Flutter学习路线-按次路线学习顺畅无比jspang.com/detailed?id=58<img src="https://pic2.zhimg.com/v2-6c38c1545f97dd0fc9d751c8ef85b955_ipico.jpg" alt="img"></a></p><hr><h2 id="十五、小程序" tabindex="-1">十五、小程序 <a class="header-anchor" href="#十五、小程序" aria-label="Permalink to &quot;十五、小程序&quot;">​</a></h2><h3 id="原生" tabindex="-1">原生 <a class="header-anchor" href="#原生" aria-label="Permalink to &quot;原生&quot;">​</a></h3><ol><li>微信</li></ol><p><a href="https://link.zhihu.com/?target=https%3A//developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noreferrer">微信开放文档developers.weixin.qq.com/miniprogram/dev/framework/</a></p><p>2)支付宝</p><p><a href="https://link.zhihu.com/?target=https%3A//opendocs.alipay.com/mini/developer" target="_blank" rel="noreferrer">支付宝开放平台文档opendocs.alipay.com/mini/developer</a></p><p>3)头条</p><h3 id="跨端" tabindex="-1">跨端 <a class="header-anchor" href="#跨端" aria-label="Permalink to &quot;跨端&quot;">​</a></h3><ul><li><strong>Taro</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//taro-docs.jd.com/taro/docs/README/index.html" target="_blank" rel="noreferrer">Taro 介绍 | Taro 文档taro-docs.jd.com/taro/docs/README/index.html</a></p><blockquote><p><em>基于 Taro 框架开发的多端 UI 组件库:</em></p></blockquote><p><a href="https://link.zhihu.com/?target=https%3A//taro-ui.jd.com/%23/docs/introduction" target="_blank" rel="noreferrer">Taro UI | O2Teamtaro-ui.jd.com/#/docs/introduction</a></p><ul><li><strong>uni-app</strong></li></ul><p><a href="https://link.zhihu.com/?target=https%3A//uniapp.dcloud.io/" target="_blank" rel="noreferrer">uni-app官网uniapp.dcloud.io/</a></p><blockquote><p>扩展组件市场：</p></blockquote><p><a href="https://link.zhihu.com/?target=https%3A//ext.dcloud.net.cn/" target="_blank" rel="noreferrer">DCloud 插件市场ext.dcloud.net.cn/<img src="https://pic1.zhimg.com/v2-80cfd3d93a2948ca9b269744e303f52c_180x120.jpg" alt="img"></a></p><h2 id="十六-桌面开发" tabindex="-1">十六：桌面开发 <a class="header-anchor" href="#十六-桌面开发" aria-label="Permalink to &quot;十六：桌面开发&quot;">​</a></h2><p><strong>Electron （推荐）</strong></p><p><a href="https://link.zhihu.com/?target=http%3A//www.electronjs.org/" target="_blank" rel="noreferrer">Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.www.electronjs.org/</a></p><h2 id="十七-扩展学习" tabindex="-1"><strong>十七：扩展学习</strong> <a class="header-anchor" href="#十七-扩展学习" aria-label="Permalink to &quot;**十七：扩展学习**&quot;">​</a></h2><ul><li>rxjs</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//cn.rx.js.org/" target="_blank" rel="noreferrer">RxJS 中文文档cn.rx.js.org/<img src="https://pic4.zhimg.com/v2-7a9e103d5793ea5db9b87c5208da5513_ipico.jpg" alt="img"></a></p><ul><li>JavaScript Promise迷你书:</li></ul><p><a href="https://link.zhihu.com/?target=http%3A//liubin.org/promises-book/" target="_blank" rel="noreferrer">JavaScript Promise迷你书（中文版）</a></p><ul><li>正则表达式：</li></ul><p><a href="https://link.zhihu.com/?target=https%3A//github.com/cdoco/learn-regex-zh" target="_blank" rel="noreferrer">https://github.com/cdoco/learn-regex-zhgithub.com/cdoco/learn-regex-zh</a></p><hr><h2 id="十八、代码检查" tabindex="-1">十八、代码检查 <a class="header-anchor" href="#十八、代码检查" aria-label="Permalink to &quot;十八、代码检查&quot;">​</a></h2><blockquote><p><strong>解决代码质量问题！</strong></p></blockquote><p>eslint(<a href="https://link.zhihu.com/?target=https%3A//www.zoo.team/article/eslint-rules" target="_blank" rel="noreferrer">自定义 ESLint 规则，让代码持续美丽</a>)</p><p><a href="https://link.zhihu.com/?target=https%3A//cn.eslint.org/" target="_blank" rel="noreferrer">ESLint - Pluggable JavaScript lintercn.eslint.org/<img src="https://pic1.zhimg.com/v2-c810a2c39a241acdd75d45fac903da84_ipico.jpg" alt="img"></a></p><p>stylelint:</p><p><a href="https://link.zhihu.com/?target=https%3A//stylelint.docschina.org/" target="_blank" rel="noreferrer">https://stylelint.docschina.org/stylelint.docschina.org/</a></p><p><a href="https://link.zhihu.com/?target=https%3A//stylelint.docschina.org/" target="_blank" rel="noreferrer">stylelint</a></p><p><a href="https://link.zhihu.com/?target=https%3A//stylelint.docschina.org/" target="_blank" rel="noreferrer">https://stylelint.docschina.org/stylelint.docschina.org/</a></p><hr><h2 id="十九、调试工具" tabindex="-1">十九、调试工具 <a class="header-anchor" href="#十九、调试工具" aria-label="Permalink to &quot;十九、调试工具&quot;">​</a></h2><h3 id="jest" tabindex="-1"><a href="https://link.zhihu.com/?target=https%3A//jestjs.io/" target="_blank" rel="noreferrer">jest</a> <a class="header-anchor" href="#jest" aria-label="Permalink to &quot;[jest](https://link.zhihu.com/?target=https%3A//jestjs.io/)&quot;">​</a></h3><h3 id="mocha" tabindex="-1"><a href="https://link.zhihu.com/?target=https%3A//mochajs.org/" target="_blank" rel="noreferrer">Mocha</a> <a class="header-anchor" href="#mocha" aria-label="Permalink to &quot;[Mocha](https://link.zhihu.com/?target=https%3A//mochajs.org/)&quot;">​</a></h3><h2 id="二十-前端周刊" tabindex="-1">二十：前端周刊 <a class="header-anchor" href="#二十-前端周刊" aria-label="Permalink to &quot;二十：前端周刊&quot;">​</a></h2><p><a href="https://link.zhihu.com/?target=https%3A//docschina.org/weekly/react/" target="_blank" rel="noreferrer">Hello from React Status | React Statusdocschina.org/weekly/react/<img src="https://pic4.zhimg.com/v2-199ffb7463711bebc0a59a20cca64087_ipico.jpg" alt="img"></a></p><p><a href="https://link.zhihu.com/?target=https%3A//weekly.75.team/" target="_blank" rel="noreferrer">奇舞周刊</a></p><p><a href="https://link.zhihu.com/?target=https%3A//github.com/ascoders/weekly%3Futm_source%3Dgold_browser_extension" target="_blank" rel="noreferrer">https://github.com/ascoders/weekly?utm_source=gold_browser_extensiongithub.com/ascoders/weekly?utm_source=gold_browser_extension</a></p><p>早早鸟</p><p><a href="https://link.zhihu.com/?target=https%3A//www.yuque.com/zaotalk/worm" target="_blank" rel="noreferrer">早早鸟日刊 · 语雀www.yuque.com/zaotalk/worm<img src="https://pic1.zhimg.com/v2-3053be574a87e8e1e15128ac7eeda8c8_ipico.jpg" alt="img"></a></p><h2 id="二十一-可以逛逛-收集的好用网站" tabindex="-1">二十一：可以逛逛，收集的好用网站 <a class="header-anchor" href="#二十一-可以逛逛-收集的好用网站" aria-label="Permalink to &quot;二十一：可以逛逛，收集的好用网站&quot;">​</a></h2><p><a href="https://zhuanlan.zhihu.com/p/166266724" target="_blank" rel="noreferrer">前端好用网站推荐</a></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad><a style="text-decoration: none;" href="http://fxl.web3v.work/images/ewm1.jpg">如有侵权请联系删除!</a></p><p class="copyright" data-v-e315a0ad>知否 © 2010-2023</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"flex布局.md\":\"BP87LxcZ\",\"ad域.md\":\"Ct6QumOu\",\"php环境搭建.md\":\"CVn3mOGq\",\"运维技术.md\":\"Dx2197ba\",\"chatgpt.md\":\"116vQvrb\",\"canvas.md\":\"BwWjkpia\",\"wordpress.md\":\"BvKFisN-\",\"常见网络命令.md\":\"h-DLpezj\",\"计算机网络.md\":\"Bz4M_N57\",\"资源.md\":\"DS3xNort\",\"路线.md\":\"Dx-Leifp\",\"链接.md\":\"C2yLG16K\",\"php语法.md\":\"DygtMl6j\",\"php应用.md\":\"3yu1Wkfb\",\"小程序.md\":\"DaQm6-Oa\",\"demo.md\":\"DiAu97_I\",\"node环境.md\":\"CZa20yFJ\",\"mysql.md\":\"BXKoWqoU\",\"公众号开发.md\":\"DxGMsID3\",\"uniapp.md\":\"DtU7Zs8R\",\"linux.md\":\"bMeVK9ek\",\"index.md\":\"fi6iMrxT\",\"tcpip.md\":\"Ci5YZCto\",\"less.md\":\"ISIW88fS\",\"vue2.md\":\"BnnFont-\",\"grid.md\":\"CSGL2tGu\",\"页面布局.md\":\"ByxvjOf0\",\"git.md\":\"CiZB2-Hi\",\"nginx.md\":\"CLg5G08y\",\"js.md\":\"ByNpo5U6\",\"composer.md\":\"DG9b_uff\",\"css.md\":\"CGTcNxn3\",\"es6.md\":\"WlZdqSNs\",\"thinkphp5.md\":\"CcZuUlif\",\"vue3.md\":\"BHHUaqjf\",\"html.md\":\"CQEGThVD\",\"sass.md\":\"lwBcy_PQ\",\"ts.md\":\"CrykCDmH\",\"node.md\":\"Bx01DVfD\",\"javascirpt.md\":\"VFCDtR7c\",\"jq.md\":\"PmLq5t9g\",\"react.md\":\"BD1tXhso\",\"echarts.md\":\"CqfICEkF\",\"laravel8.5.md\":\"GGYwgL9h\",\"案例.md\":\"CXbAG9mn\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"知否\",\"description\":\"Just playing around.\",\"base\":\"/dist/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端开发\",\"items\":[{\"text\":\"HTML\",\"link\":\"./html\"},{\"text\":\"CSS\",\"link\":\"./css\"},{\"text\":\"JavaScript\",\"link\":\"./js\"},{\"text\":\"ECMAScript6\",\"link\":\"./es6\"},{\"text\":\"TypeScript\",\"link\":\"./ts\"},{\"text\":\"Git\",\"link\":\"./git\"},{\"text\":\"React\",\"link\":\"./react\"},{\"text\":\"Vue2\",\"link\":\"./vue2\"},{\"text\":\"Vue3\",\"link\":\"./vue3\"},{\"text\":\"Node.js\",\"link\":\"./node\"},{\"text\":\"微信小程序开发\",\"link\":\"./小程序\"},{\"text\":\"UniApp\",\"link\":\"./uniapp\"},{\"text\":\"公众号开发\",\"link\":\"./公众号开发\"}]},{\"text\":\"PHP\",\"items\":[{\"text\":\"环境搭建\",\"link\":\"/PHP环境搭建\"},{\"text\":\"PHP语法\",\"link\":\"/PHP语法\"},{\"text\":\"Mysql\",\"link\":\"/mysql\"},{\"text\":\"PHP应用\",\"link\":\"/PHP应用\"},{\"text\":\"Composer\",\"link\":\"/Composer\"},{\"text\":\"Thinkphp5.0\",\"link\":\"/Thinkphp5\"},{\"text\":\"Laravel5.6\",\"link\":\"/Laravel8.5\"}]},{\"text\":\"网络技术\",\"items\":[{\"text\":\"TCP/IP协议\",\"link\":\"/tcpip\"},{\"text\":\"常见网络命令\",\"link\":\"/常见网络命令\"},{\"text\":\"计算机网络\",\"link\":\"/计算机网络\"}]},{\"text\":\"运维技术\",\"items\":[{\"text\":\"运维技术\",\"link\":\"/运维技术\"},{\"text\":\"AD域\",\"link\":\"/AD域\"}]},{\"text\":\"知识碎片\",\"items\":[{\"text\":\"页面布局\",\"link\":\"/页面布局\"},{\"text\":\"Grid 网格布局\",\"link\":\"/Grid\"},{\"text\":\"Flex 布局\",\"link\":\"/Flex布局\"},{\"text\":\"Less\",\"link\":\"/less\"},{\"text\":\"Sass\",\"link\":\"/Sass\"},{\"text\":\"Canvas\",\"link\":\"/canvas\"},{\"text\":\"JS文档\",\"link\":\"/JavaScirpt\"},{\"text\":\"Node环境搭建\",\"link\":\"/node环境\"},{\"text\":\"JQuery笔记\",\"link\":\"/jq\"},{\"text\":\"Echarts\",\"link\":\"/echarts\"},{\"text\":\"Nginx\",\"link\":\"/nginx\"},{\"text\":\"WordPress\",\"link\":\"/wordpress\"},{\"text\":\"Linux\",\"link\":\"/linux\"}]},{\"text\":\"资料分享\",\"items\":[{\"text\":\"TCP/IP协议\",\"link\":\"https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA#list/path=%2F\"},{\"text\":\"网络工程师\",\"link\":\"https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ#list/path=%2F\"},{\"text\":\"Linux镜像\",\"link\":\"https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg\"},{\"text\":\"Web开发电子书\",\"link\":\"https://pan.baidu.com/s/1tByRfM5z4vLywmTt206YZg\"},{\"text\":\"心理学电子书\",\"link\":\"https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g#list/path=%2F\"},{\"text\":\"摄影教程\",\"link\":\"https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg#list/path=%2F\"},{\"text\":\"系统激活工具\",\"link\":\"https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew#list/path=%2F\"},{\"text\":\"office软件\",\"link\":\"https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q#list/path=%2F\"},{\"text\":\"计算机维修教程\",\"link\":\"https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q#list/path=%2F\"},{\"text\":\"英语资料\",\"link\":\"https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg#list/path=%2F\"},{\"text\":\"简历模板\",\"link\":\"https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg#list/path=%2F\"},{\"text\":\"教资\",\"link\":\"https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A#list/path=%2F\"},{\"text\":\"网络工程实战\",\"link\":\"https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ#list/path=%2F\"},{\"text\":\"安防弱点资料\",\"link\":\"https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ#list/path=%2F\"},{\"text\":\"Adobe软件\",\"link\":\"https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q#list/path=%2F\"},{\"text\":\"PPT模板\",\"link\":\"https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ#list/path=%2F\"},{\"text\":\"软考系统集成\",\"link\":\"https://pan.baidu.com/s/1Y8q4vXkx9FUpi0U3a7rJKw\"},{\"text\":\"ChatGPT\",\"link\":\"/ChatGPT\"}]}],\"footer\":{\"message\":\"<a style=\\\"text-decoration: none;\\\" href=\\\"http://fxl.web3v.work/images/ewm1.jpg\\\">如有侵权请联系删除!</a>\",\"copyright\":\"知否 © 2010-2023\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>